<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Customize a Chart&#x27;s Tooltip</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Customize a Chart&#x27;s Tooltip</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}
</style>
<div class="intro">
<p>This example shows how to customize the default tooltip of a <code>Chart</code>.</p>
</div>
<div class="example">
<div id="mychart"></div>
<script type="text/javascript">
(function() {
    YUI().use('charts', function (Y) 
    { 
        var myDataValues = [ 
            {category:"5/1/2010", Miscellaneous:2000, Expenses:3700, Revenue:2200}, 
            {category:"5/2/2010", Miscellaneous:50, Expenses:9100, Revenue:100}, 
            {category:"5/3/2010", Miscellaneous:400, Expenses:1100, Revenue:1500}, 
            {category:"5/4/2010", Miscellaneous:200, Expenses:1900, Revenue:2800}, 
            {category:"5/5/2010", Miscellaneous:5000, Expenses:5000, Revenue:2650}
        ];
        
        var myTooltip = {
            styles: { 
                backgroundColor: "#333",
                color: "#eee",
                borderColor: "#eee",
                textAlign: "center",
                padding: "2px 8px 2px 8px"
            },
            markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
            {
                var msg = "<span style=\"text-decoration:underline\">" + valueItem.displayName + " for " + 
                categoryItem.axis.get("labelFunction").apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")]) + 
                "</span><br/><div style=\"margin-top:5px;font-weight:bold\">" + valueItem.axis.get("labelFunction").apply(this, [valueItem.value, {prefix:"$", decimalPlaces:2}]) + "</div>";
                return msg; 
            }
        };

        var mychart = new Y.Chart({
                            dataProvider:myDataValues, 
                            type:"bar",
                            render:"#mychart", 
                            tooltip: myTooltip
                        });
    });
})();
</script>

</div>

<h3>This example shows how to customize the tooltip for a <code>Chart</code>.</h3>

<p>A <code>Chart</code> instance comes with a simple default tooltip. This tooltip is represented by the <code>tooltip</code> attribute. Through the tooltip attribute you can do the following:
<ul>
    <li>Style the tooltip background, border and text.</li>
    <li>Customize and format the tooltip message.</li>
    <li>Change the show and hide events.</li>
    <li>Disable the tooltip.</li>
</ul>
</p>
<p>The <code>tooltip</code> attribute contains the following properties:
    <ul>
       <li>showEvent: event that should trigger the tooltip</li>
       <li>hideEvent: event that should trigger the removal of a tooltip (can be an event or an array of events)</li>
       <li>styles: hash of style properties that will be applied to the tooltip node</li>
       <li>show: indicates whether or not to show the tooltip</li>
       <li>markerEventHandler: displays and hides tooltip based on marker events</li>
       <li>planarEventHandler: displays and hides tooltip based on planar events</li>
       <li>markerLabelFunction: reference to the function used to format a marker event triggered tooltip's text</li>
       <li>planarLabelFunction: reference to the function used to format a planar event triggered tooltip's text</li>
    </ul>
</p>
<p>In this example, we have changed the styles and set a custom <code>markerLabelFunction</code> to format the text.</p>
<pre class="code prettyprint">var myDataValues = [ 
    {category:&quot;5&#x2F;1&#x2F;2010&quot;, Miscellaneous:2000, Expenses:3700, Revenue:2200}, 
    {category:&quot;5&#x2F;2&#x2F;2010&quot;, Miscellaneous:50, Expenses:9100, Revenue:100}, 
    {category:&quot;5&#x2F;3&#x2F;2010&quot;, Miscellaneous:400, Expenses:1100, Revenue:1500}, 
    {category:&quot;5&#x2F;4&#x2F;2010&quot;, Miscellaneous:200, Expenses:1900, Revenue:2800}, 
    {category:&quot;5&#x2F;5&#x2F;2010&quot;, Miscellaneous:5000, Expenses:5000, Revenue:2650}
];

var myTooltip = {
    styles: { 
        backgroundColor: &quot;#333&quot;,
        color: &quot;#eee&quot;,
        borderColor: &quot;#fff&quot;,
        textAlign: &quot;center&quot;
    },
    markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
    {
        var msg = &quot;&lt;span style=\&quot;text-decoration:underline\&quot;&gt;&quot; + valueItem.displayName + &quot; for &quot; + 
        categoryItem.axis.get(&quot;labelFunction&quot;).apply(this, [categoryItem.value, categoryItem.axis.get(&quot;labelFormat&quot;)]) + 
        &quot;&lt;&#x2F;span&gt;&lt;br&#x2F;&gt;&lt;div style=\&quot;margin-top:5px;font-weight:bold\&quot;&gt;&quot; + valueItem.axis.get(&quot;labelFunction&quot;).apply(this, [valueItem.value, {prefix:&quot;$&quot;, decimalPlaces:2}]) + &quot;&lt;&#x2F;div&gt;&quot;;
        return msg; 
    }
};

var mychart = new Y.Chart({
                    dataProvider:myDataValues, 
                    type:&quot;bar&quot;,
                    render:&quot;#mychart&quot;, 
                    tooltip: myTooltip
                });</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to use Charts to create a basic chart.">
                                        <a href="charts-simple.html">Basic Charts Implementation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with multiple series.">
                                        <a href="charts-multiseries.html">Chart with Multiple Series</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a column chart with multiple series.">
                                        <a href="charts-column.html">Specify Chart Type</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a column chart with a stacked numeric axis.">
                                        <a href="charts-stackedcolumn.html">Create Stacked Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with a time axis.">
                                        <a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to add gridlines to a chart.">
                                        <a href="charts-gridlines.html">Add Gridlines to a Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with planar based events.">
                                        <a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use a chart&#x27;s styles attribute to customize a chart.">
                                        <a href="charts-globalstyles.html">Customize a Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to customize the default tooltip of a chart.">
                                        <a href="charts-customizedtooltip.html">Customize a Chart&#x27;s Tooltip</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to explicitly define the axes and series for a chart.">
                                        <a href="charts-objectstyles.html">Define a Chart&#x27;s Axes and Series</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use charts to create a pie chart.">
                                        <a href="charts-pie.html">Pie Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a chart with multiple value axes.">
                                        <a href="charts-dualaxes.html">Dual Axes Chart</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to access a chart instance&#x27;s value axis after the chart has rendered.">
                                        <a href="charts-axisupdate.html">Update Chart Axis</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to access a chart instance&#x27;s seriesCollection after the chart has rendered.">
                                        <a href="charts-seriesupdate.html">Update Chart Series</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
